<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <style type="text/css">
        .list-complete-item {
            transition: all 1s;
            display: inline-block;
            margin-right: 10px;
        }
        .list-complete-enter, .list-complete-leave-to
            /* .list-complete-leave-active for below version 2.1.8 */ {
            opacity: 0;
            transform: translateY(30px);
        }
        .list-complete-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
<h1>vue.js</h1>
<br>
<br>
<div style="width: 666px; margin: auto;" id="app">
    <h1>{{ message }}</h1>
    <br>
    <button @click="start">开始</button>&nbsp;&nbsp;&nbsp;<button v-on:click="cease">停止</button>
</div>
<p>------------------</p>
<div id="list-complete-demo" class="demo">
    <button v-on:click="shuffle">Shuffle</button>
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list-complete" tag="p">
    <span
            v-for="item in items"
            v-bind:key="item"
            class="list-complete-item"
    >
      {{ item }}
    </span>
    </transition-group>
</div>
<label></label>

<script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script>
    $(function () {
        app.shijian();
    });

    var app = new Vue({
        el: '#app',
        data: {
            message: new Date().toLocaleString(),
            i: null
        },
        methods: {
            cease: function () {
                this.i = window.clearInterval(this.i);
            },
            start: function () {
                this.shijian();
            },
            shijian: function () {
                app.i = window.setInterval(function () {
                    app.message = new Date().toLocaleString();
                }, 1000);
                console.info("第" + app.i + "个定时器");
            }
        }
    });

    new Vue({
        el: '#list-complete-demo',
        data: {
            items: [1,2,3,4,5,6,7,8,9],
            nextNum: 10
        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            add: function () {
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove: function () {
                this.items.splice(this.randomIndex(), 1)
            },
            shuffle: function () {
                this.items = _.shuffle(this.items)
            }
        }
    })

</script>
</body>
</html>